/*
 * @Author: xiaosihan 
 * @Date: 2021-06-13 12:18:13 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-07-17 22:04:42
 */

import React from "react";
import ReactDOM from "react-dom";
import TitleDom from "./TitleDom";

class TitleDomControl {

    constructor() { }

    _instance!: TitleDom;

    // 设置tipdom react实例
    setTitleDomInstance(instance: TitleDom) {
        this._instance = instance;
    }

    // 设置tipdom 的位置
    setTitleDomInstancePosition(x: number, y: number) {
        this._instance

        let TitleDom = ReactDOM.findDOMNode(this._instance) as HTMLDivElement;
        let container = TitleDom.parentNode as HTMLDivElement;

        let containerRect = container.getBoundingClientRect();
        let titleDomRect = TitleDom.getBoundingClientRect();

        if ((x + 20 + titleDomRect.width) < containerRect.width) {
            x += 20;
        } else {
            x -= (titleDomRect.width + 10);
        }

        if ((y + 20 + titleDomRect.height) < containerRect.height) {
            y += 20;
        } else {
            y -= (titleDomRect.height + 10);
        }

        TitleDom.style.transform = `translate(${x}px, ${y}px)`;
    }

    // 设置tipdom 的内容
    setTitleDomInstanceComponent(Component?: any) {
        let TitleDom = ReactDOM.findDOMNode(this._instance) as HTMLDivElement;

        ReactDOM.render(
            <> {Component} </ >
            ,
            TitleDom
        );
        if (Component) {
            setTimeout(() => {
                TitleDom.style.opacity = "1";
            }, 50);
        } else {
            TitleDom.style.opacity = "0";
        }
    }

}

export default TitleDomControl;